import React, {
    Component
} from 'react';
import {
    observer
} from 'mobx-react';
import {
    WeaTable
} from 'ecCom';
import {
    i18n
} from '../../../public/i18n';
import find from 'lodash/find';
import filter from 'lodash/filter';
import remove from 'lodash/remove';
import Detail from './Detail';

@observer
export default class DataList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            r: new Date().getTime()
        }
    }

    componentDidMount() {
        window.addEventListener('resize', this.resizeHandle);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.resizeHandle);
    }

    resizeHandle = (e) => {
        this.calculateH();
    }

    calculateH = () => {
        this.setState({
            r: new Date().getTime()
        })
    }

    render() {
        const {
            store
        } = this.props;
        const {
            table,
            displayColumns,
            selectedSerial,
            total,
            pageIndex,
            pageSize,
            getKQReport,
            getQueryParams,
            showSignDetail,
        } = store;
        let dcf = store.toJS(displayColumns);
        // selectedSerial === '' && remove(dcf, v => v.key === 'attendanceSerial');
        let {
            columns,
            datas
        } = store.toJS(table);
        if(columns.length == 0)
            return <div/>
        columns = filter(columns, column => {
            let d = find(dcf, {
                key: column.dataIndex
            }) || {
                selected: true
            };
            return d.selected;
        });
        // columns = columns.map(c => {
        //     if(c.children != null && c.children.length > 0){
        //         c.children = filter(c.children, col => {
        //             let d = find(dcf, {
        //                 key: col.dataIndex
        //             }) || {
        //                 selected: true
        //             };
        //             return d.selected;
        //         })
        //     }
        //     return c;
        // })
        let width = 0;
        columns.map(c => {
            width += c.width;
        });
        const pagination = {
            total,
            current: pageIndex,
            current: pageIndex,
            pageSize: pageSize,
            showQuickJumper: true,
            pageSizeOptions: [10, 20, 50, 100],
            showSizeChanger: true,
            showTotal: (total) => {
                return `${i18n.label['18609']()} ${total} ${i18n.label['30690']()}`;
            },
            onShowSizeChange: (current, pageSize) => {
                getKQReport(getQueryParams(current, pageSize));
            },
            onChange: (current) => {
                getKQReport(getQueryParams(current));
            }
        }

        return (
            <div className='dataList' style={{top: $('.searchGroup').height() + 20}}>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@uhq06h`} ref={ref => store.tableRef = ref} columns={columns} dataSource={datas} scroll={{x: width, y: $('.wea-new-top-content').height() - $('.searchGroup').height() - 20 - 200}} bordered pagination={pagination}/>
                <Detail ecId={`${this && this.props && this.props.ecId || ''}_Detail@3fwwaq`} store={store} />
            </div>
        )
    }
}